<template>
	<view class="theme-dark">
		<view class="cu-modal" :class="modalName=='RadioModal'?'show':''" @tap="hideModal">
			<view class="cu-dialog" @tap.stop="">
				<radio-group class="block" @change="RadioChange2" @tap="hideModal">
					<view class="cu-list menu text-left">
						<view class="cu-item" v-for="(item, index) in payment" :key="index">
							<label class="flex justify-between align-center" style=" width: 94%;">
								<view style="word-break:  break-all;">{{item.type_text}} | {{item.address}}</view>
								<radio class="round" style="right: 13px; position: fixed;"
									:class="radio2== index?'checked':''" :checked="radio2== index?true:false"
									:value="index+''"></radio>
							</label>
						</view>
					</view>
				</radio-group>
			</view>
		</view>

		<form @submit="" @reset="">
			<view style="margin: 10px;">
				<view class="cu-form-group ">
					<view class="title">{{i18n.cash.cashtype}}</view>
					<picker @change="PickerChange" :value="type" :range="picker">
						<view class="picker">
							{{type}}
						</view>
					</picker>
				</view>
			</view>
			<!-- <view style="margin: 10px;">
				<view class="cu-form-group ">
					<view class="title">{{i18n.cash.cashtype}}</view>
					<text class="text-yellow margin-right-sm">USDT</text>
				</view>
			</view> -->
			<view style="margin: 10px;">
				<view class="cu-form-group t-t1" @tap="selectaddr">
					<view class="title">{{i18n.cash.addr}}</view>
					<button class='cu-btn line-yellow round sm'>{{ i18n.cash.select }}</button>
					<!-- pages/address2/addressselect -->
				</view>
				<view class="cu-form-group t-t2" v-if="selectaddrsite.id" style="display: block;">
					<view class="cu-item">
						<view class="content">
							<image src="../../static/zfb.png" class="png" mode="aspectFit" v-if="selectaddrsite.type==1"></image>
							<image src="../../static/wx.png" class="png" mode="aspectFit" v-if="selectaddrsite.type==2"></image>
							<image src="../../static/yh.png" class="png" mode="aspectFit" v-if="selectaddrsite.type==3"></image>
							<text class="text-grey">{{selectaddrsite.type_text}}</text>
						</view>
					</view>
					<view class="flex cu-item ">
						<view class="flex-treble " v-if="selectaddrsite.type <= 5">
							<view class="cu-item text-left">
								<text class="text-df nowrap" style="margin-left: 9px;">{{i18n.address2.account}}</text>
								<view style="margin-left: 9px;">
									<!-- <view class="text-content">{{item.address}}</view> -->
									<view class="text-lg row" style="word-break: break-word;" >{{selectaddrsite.address}}</view>
								</view>
							</view>
						</view>
						<view class="flex-treble " v-else>
							<view class="cu-item text-left">
								<text class="text-df nowrap" style="margin-left: 9px;">{{i18n.address2.bank}}</text>
								<view style="margin-left: 9px;">
									<!-- <view class="text-content">{{item.address}}</view> -->
									<view class="text-lg row" style="word-break: break-word;" >{{selectaddrsite.bank}}{{selectaddrsite.bank_card_no}}</view>
									<view class="text-lg row" style="word-break: break-word;" >{{selectaddrsite.username}}</view>
								</view>
							</view>
						</view>
						<!-- <view class="flex-twice ">2</view> -->
						
					</view>
				</view>
				<!-- <view class="cu-form-group t-t2"> -->
					<!-- <input type="text" :placeholder="i18n.cash.inputaddr" v-model="info" disabled="true" @tap="showModal('RadioModal')"
					 @blur="lost"> -->
					<!-- <button class='cu-btn line-yellow round sm' @tap="addaddr">{{i18n.cash.add}}</button> -->
				<!-- </view> -->
			</view>

			<view style="margin: 10px;">
				<view class="cu-form-group t-t1">
					<view class="title">{{i18n.cash.number}}</view>

				</view>
				<view class="cu-form-group ">

					<input type="number" :placeholder="i18n.cash.inputnumber" v-model="form.number"
						@tap="chight"></input>
					<text class="text-gray margin-right-sm">{{type}}</text>
					<text @tap="allin">{{i18n.cash.allin}}</text>
				</view>
				<view class="line"></view>
				<view class="cu-form-group t-t2">
					<view class="">
						<text class="text-gray margin-right-sm">{{i18n.cash.available}}</text>
						<text class="text-yellow margin-right-sm">{{type1_use}}</text>
						<text class="text-white margin-right-sm">{{type}}</text>
					</view>
				</view>
			</view>

			<view style="margin: 10px;">
				<view class="cu-form-group t-t1">
					<view class="title">{{i18n.cash.fee}}</view>

				</view>
				<view class="cu-form-group t-t2">
					<text class="text-yellow margin-right-sm">{{fee*100}}%</text>

					<text class="text-yellow margin-right-sm">{{type}}</text>
				</view>
			</view>

			<view style="margin: 10px;">
				<view class="cu-form-group t-t1">
					<view class="title">{{i18n.set.paypassword}}</view>

				</view>
				<view class="cu-form-group t-t2">
					<input :password="showPassword" :placeholder="i18n.cash.inputpass" v-model="form.password2"></input>

					<image style="width: 32px;height: 32px; " src='/static/my/see1.png' mode="" v-if="!showPassword"
						@tap="changePassword"></image>
					<image style="width: 32px;height: 32px; " src='/static/my/see2.png' mode="" v-if="showPassword"
						@tap="changePassword"></image>
				</view>
			</view>
			
			
			 
			<!-- <view id="nav-bar" scroll-x class="nav margin-sm  ">
				<view  >
					<view class="cu-item"  :id="'tab'+index" v-for="(item,index) in tabBars" :key="item.id" :class="item.id==form.needcode?'text-yellow':''"
					 @tap="changeTab(item.id)">
						{{item.name}}
					</view>
				</view>
			</view> -->
			 
			<!-- <view style="margin: 10px;" v-if="form.needcode ==1">
				<view class="cu-form-group t-t1">
					<view class="title"> {{userinfo.mobile ?userinfo.mobile : i18n.set.unbind }}</view>

				</view>
				<view class="cu-form-group t-t2">
					<input type="number" :placeholder="i18n.set.reqmobilecode" v-model="form.code"></input>

					<text @tap="getCode">{{getCodeText}}</text>
				</view>
			</view> -->
			
			<!-- <view style="margin: 10px;" v-if="form.needcode ==2">
				<view class="cu-form-group t-t1">
					<view class="title">{{userinfo.email ?userinfo.email : i18n.set.unbind }}</view>
			
				</view>
				<view class="cu-form-group t-t2">
					<input type="number" :placeholder="i18n.set.reqemailcode" v-model="form.code"></input>
			
					<text @tap="getCode2">{{getCodeText}}</text>
				</view>
			</view> -->


			<!-- <view class="cu-form-group" v-if="form.needcode ==1">
				<view class="title">{{i18n.set.bindmobile}}</view>
				<input type="number" :value="userinfo.mobile" disabled="disabled"></input>
			</view>
			<view class="cu-form-group" v-if="form.needcode ==1">
				<view class="title">{{i18n.set.mobilecode}}</view>
				<input type="number" :placeholder="i18n.set.reqmobilecode" v-model="form.code"></input>
				<button class='cu-btn bg-yellow round' @tap="getCode">{{getCodeText}}</button>
			</view> -->
			<!-- <view class="cu-form-group">
				<view class="title">提币备注</view>
				<input placeholder="选填" name="input"></input>
			</view> -->
			<!-- <view class="flex-sub  ">
				<view class="solid-bottom text-xs padding">
					{{i18n.cash.info}}{{fee}}{{type}}

				</view>
			</view> -->
			<view class="padding flex flex-direction">
				<button class="cu-btn bg-yellow lg" @tap="submit">{{i18n.cash.confirm}}</button>
			</view>


		</form>
		<!-- <view class="padding flex flex-direction" v-if="payimg">
			<view class="">我的收款码</view>
			<image :src="payimg" mode=""></image>
		</view> -->


		<key-words :show_key="show_key" :show_subTitle="false" :price="'1.00'" @closeFuc="closeFuc"
			@getPassword="getPassword"></key-words>
	</view>

</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	export default {
		data() {
			return {
				// picker: ['BTC', 'ETH', 'EMP'],
				type: '',
				info: '',
				getCodeText: '获取验证码',
				getCodeBtnColor: "#ffffff",
				getCodeisWaiting: false,
				form: {
					needcode: 0,
					code: '',
					number: '',
					userwallet: '',
					ptype1: '',
					payment: '',
				},
				inc: false,
				show_key: false,
				check: false,
				modalName: null,
				radio2: '',
				typeList: ['类型', '支付宝', '微信', '银行卡'],
				showPassword: false,
				payimg: '',
				selectaddrsite:{}
			}
		},
		computed: {
			...mapState({
				userinfo: state => state.user.userinfo,
				myconfig: state => state.user.myconfig,
				payment: state => state.user.payment
			}),
			hasLogin() {
				return this.userinfo.id ? true : false
			},
			rule() {
				return this.myconfig.cashwall;
			},
			cointype2() {
				return this.myconfig.cointype2;
			},
			picker() {
				let arr = [];
				for (let key in this.rule) {
					arr.push(key)
				}
				return arr;
			},
			type1_use() {
				return this.userinfo[this.rule[this.type]];
			},

			type1_freeze() {
				return this.userinfo[this.rule[this.type] + 'freeze'];
			},

			type1_total() {
				let wall = this.rule[this.type];
				return this.accAdd(this.userinfo[wall], this.userinfo[wall + 'freeze'])
			},
			i18n() {
				return this.$t('message');
			},
			fee() {
				// let wall = this.rule[this.type];
				return this.myconfig.vip_cash_fee[this.type];
			},
			tabBars() {
				let arr = [];
				if (this.myconfig.base_reg_mobile>0) {
					arr.push({
						name: this.i18n.set.mobile, 
						id: '1',
						uri: ''
					})
				}
				if (this.myconfig.base_reg_email>0) {
					arr.push({
						name: this.i18n.set.email, 
						id: '2',
						uri: ''
					})
				}
				return arr
			},
		},
		methods: {
			...mapActions(['getUserinfo', 'getUserPayment']),
			changeTab(index) {
				this.form.needcode = index
			},
			Timer() {},
			getCode() {
				uni.hideKeyboard()
				if (this.getCodeisWaiting) {
					return;
				}
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.userinfo.mobile))) {
					this.$api.msg(this.i18n.popup.errmobile);
					return;
				}
				// this.getCodeText = "发送中..."
				this.getCodeisWaiting = true;
				// this.getCodeBtnColor = "rgba(255,255,255,0.5)"

				this.$http.post('index.code.get', {
					mobile: this.userinfo.mobile,
					event: 'cash'
				}).then(res => {
					console.log(res);
					uni.showToast({
						title: this.i18n.login.sendcode,
						icon: "none"
					});
					this.setTimer();
				}).catch(e => {
					this.setTimer();
				})
			},
			getCode2() {
				uni.hideKeyboard()
				if (this.getCodeisWaiting) {
					return;
				}
				if (!(/^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/.test(this.userinfo.email))) {
					uni.showToast({
						title: this.i18n.popup.erremail,
						icon: "none"
					});
					return false;
				}
				// this.getCodeText = "发送中..."
				this.getCodeisWaiting = true;
				// this.getCodeBtnColor = "rgba(255,255,255,0.5)"
			
				this.$http.post('index.code.get2', {
					email: this.userinfo.email,
					event: 'cash'
				}).then(res => {
					console.log(res);
					uni.showToast({
						title: this.i18n.login.sendcode,
						icon: "none"
					});
					this.setTimer();
				}).catch(e => {
					this.setTimer();
				})
			},
			setTimer() {
				let holdTime = 60;
				this.getCodeText = this.i18n.login.Reacquire + "(60)"
				this.Timer = setInterval(() => {
					if (holdTime <= 0) {
						this.getCodeisWaiting = false;
						this.getCodeBtnColor = "#ffffff";
						this.getCodeText = this.i18n.login.getcode;
						clearInterval(this.Timer);
						return;
					}
					this.getCodeText = this.i18n.login.Reacquire + "(" + holdTime + ")"
					holdTime--;

				}, 1000)
			},
			PickerChange(e) {
				
				this.type = this.picker[e.detail.value];
				let wall = this.rule[this.type];
				this.form.ptype1 = wall;
			},
			//加法
			accAdd(arg1, arg2) {
				var r1, r2, m, n;
				try {
					r1 = arg1.toString().split(".")[1].length
				} catch (e) {
					r1 = 0
				}
				try {
					r2 = arg2.toString().split(".")[1].length
				} catch (e) {
					r2 = 0
				}
				m = Math.pow(10, Math.max(r1, r2));
				//last modify by deeka
				//动态控制精度长度
				n = (r1 >= r2) ? r1 : r2;
				var ree = ((arg1 * m + arg2 * m) / m).toFixed(n);
				return ree > 0 ? ree : 0;
			},
			submit() {
				// if (!this.check) {
				// 	this.show_key = true;
				// 	return 1;
				// } 
				if (this.form.needcode == 1) {
					if(this.userinfo.mobile==''){
						this.$api.msg(this.i18n.set.inputbindmobile);
						return;
					}
					this.form.mobile = this.userinfo.mobile;
					if (!this.form.code) {
						this.$api.msg(this.i18n.set.reqmobilecode);
						return;
					}
				}
				if (this.form.needcode == 2) {
					 console.log(this.userinfo.email=='')
					if(this.userinfo.email==''){
						this.$api.msg(this.i18n.set.inputbindemail);
						return;
					}
					this.form.email = this.userinfo.email;
					if (!this.form.code) {
						this.$api.msg(this.i18n.set.reqemailcode);
						return;
					}
				};
				let sendData = {
					needcode:this.form.needcode,
					code:this.form.code,
					number:this.form.number,
					userwallet:this.form.userwallet,
					ptype1: this.form.ptype1,
					payment:this.form.payment,
					address_id:this.selectaddrsite.id
				};
				this.$http.post('user.Cash.edit', sendData).then(res => {
					this.$api.msg(this.i18n.charge.successINFO);
					this.getUserinfo()
					setTimeout(() => {
						this.$api.prePage()
					}, 800)
				})
			},
			chight() {
				this.inc = true;
			},
			lost() {
				this.inc = false;
			},
			closeFuc() {
				this.show_key = false;
			},
			//密码输入完需要执行的方法
			getPassword(msg) {
				//msg:密码   例如:{msg:123456}
				console.log(msg)
				let data = {
					password2: msg.password
				}
				this.$http.post('user.checkpass', data).then(res => {
					console.log(res)
					if (res.code == 1) {
						this.check = true;
						this.submit();
					} else {
						this.$api.msg(res.msg);
					}
				})
				this.closeFuc();
			},
			showModal(name) {
				console.log(this.payment.length)
				if (this.payment.length < 1) {
					uni.navigateTo({
						url: '/pages/address2/address'
					})
					return false
				}
				this.modalName = name
			},
			hideModal(e) {
				this.modalName = null
			},
			addaddr() {
				uni.navigateTo({
					url: '/pages/address2/address'
				})
			},
			selectaddr(){
				uni.navigateTo({
					url: '/pages/address2/addressselect'
				})
			},
			RadioChange2(e) {
				console.log(this.payment[e.detail.value])
				this.choseaddr(e.detail.value)
				this.modalName = null
			},
			changePassword: function() {
				this.showPassword = !this.showPassword;
			},
			allin() {
				this.form.number = this.type1_use
			},
			choseaddr(index) {
				// this.info=this.payment[index].type_text+this.payment[index].address;
				this.info = this.payment[index].address;
				this.form.payment = this.payment[index].id;
				this.form.userwallet = this.payment[index].address;
				this.payimg = this.payment[index].image;
				this.radio2 = index;
			}
		},
		onShow() {
			if (!this.hasLogin) {
				uni.navigateTo({
					url: '/pages/public/login'
				})
			}
			uni.setNavigationBarTitle({
				title: this.i18n.cash.title
			});
			this.getUserinfo();
			this.getUserPayment().then((re) => {
				if (this.payment.length > 0) {
					this.choseaddr(0)
				}
			})
			this.type = this.picker[0];
			// this.form.ptype1=this.cointype2[this.type];
			this.form.ptype1 = 'wall1';
			// this.form.userwallet = this.userinfo.imtoken;
			this.getCodeText = this.i18n.login.getcode;
			 
			if(this.form.needcode==1){
				if(this.myconfig.base_reg_mobile==0){ 
					this.form.needcode=2;
				}
			};
			
			this.selectaddrsite = uni.getStorageSync('selectaddress');
			console.log(this.selectaddrsite)
		},
	}
</script>

<style>
	.row {
		display: inline;
	}

	.tij {
		bottom: 0px;

		width: -webkit-fill-available;
	}



	.t-t1 {
		padding-top: 10px;
	}

	.t-t2 {
		padding-bottom: 10px;
	}
	/* 展示地址 */
	.list {
		display: flex;
		align-items: center;
		padding: 20upx 30upx;
		;
		/* background: #fff; */
		position: relative;
	}
	
	.wrapper {
		display: flex;
		flex-direction: column;
		flex: 1;
	}
	
	.address-box {
		display: flex;
		align-items: center;
	
		.tag {
			font-size: 24upx;
			color: $base-color;
			margin-right: 10upx;
			background: #fffafb;
			border: 1px solid #ffb4c7;
			border-radius: 4upx;
			padding: 4upx 10upx;
			line-height: 1;
		}
	
		.address {
			font-size: $font-base;
			color: $font-color-dark;
			flex: 1;
		}
	}
	
	.u-box {
		font-size: 28upx;
		color: $font-color-light;
		margin-top: 16upx;
	
		.name {
			margin-right: 30upx;
		}
	}
	
	.iconshanchu1 {
		display: flex;
		align-items: center;
		height: 80upx;
		font-size: 40upx;
		color: $font-color-light;
		padding-left: 30upx;
	}
	
	.add-btn {
		// position: fixed;
		left: 30upx;
		right: 30upx;
		bottom: 16upx;
		z-index: 95;
		display: flex;
	}
	
	.del-btn {
		color: #fa436a;
	}
</style>
